import React, { Component } from 'react'
import axios from 'axios'
export default class index extends Component {
  state = {
    keyword: ''
  }
  getKeyword = e => {
    console.log(e.target.value)
    this.setState({ keyword: e.target.value })
  }
  handleSearch = () => {
    console.log(this.state.keyword)
    let keyword = this.state.keyword || ''
    this.props.updateState({isFirst: false, isLoading: true})
    axios.get(`https://api.github.com/search/users?q=${keyword}`).then(res => {
      console.log(res.data.items);
      this.props.handleData(res.data.items)
    }).catch(err => {
      console.log(err)
      this.props.updateState({err, isLoading: false})
  }).finally(() => {
      this.props.updateState({isLoading: false})
    });
  }
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索github用户</h3>
        <div>
          <input type="text" placeholder="输入关键词搜索" onChange={this.getKeyword}/>&nbsp;<button onClick={this.handleSearch}>搜索</button>
        </div>
      </section>
    )
  }
}
